<template>
  <div class="container-image">
      <el-card>
        <div slot="header">
          <my-bread>素材管理</my-bread>
        </div>
          <!-- 内容 -->
          <!-- 按钮区域 -->
          <div class="btn-box">
            <!-- v-model="radio1"的名称最好与后台一致 -->
            <el-radio-group @change="toggleList()" v-model="reqParams.collect" size="small">
              <!-- label属性单个按钮的值当你选中点击后这个值会给绑定的值 reqParams.collect
              当没有文字说明时 label还有按钮显示文字的意思-->
              <el-radio-button :label="false">全部</el-radio-button>
              <el-radio-button :label="true" >收藏</el-radio-button>
            </el-radio-group>
            <el-button type="success" style="float:right" size="small" @click="openDialog()">添加素材</el-button>
          </div>
          <!-- 列表区域 -->
          <div class="list-box">
            <div class="item-box" v-for="item in images" :key="item.id">
              <img :src="item.url" alt="">
              <div class="option" v-if="!reqParams.collect">
                <span class="el-icon-star-off" @click="toggleStatus(item)" :class="{'red':item.is_collected}"></span>
                <span class="el-icon-delete" @click="delImage(item.id)"></span>
              </div>
            </div>
          </div>
          <!-- 分页区域 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="reqParams.per_page"
            :current-page="reqParams.page"
            @current-change="changePager"
            >
          </el-pagination>
      </el-card>
      <!-- 对话框 -->
      <el-dialog
          title="上传素材"
          :visible.sync="dialogVisible"
          width="300px"
         >
        <span>
          <!-- 上传组件 -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            name="image"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- 有依赖样式 -->
        </span>
      </el-dialog>
  </div>
</template>

<script>
import auth from '@/utils/auth'
export default {
    //取名要求：不要和原生的标签重名,vue会给你报错 （组件的配置对象name属性    new Vue({component})  Vue.component(组件名称,组件配置对象)）
    name:'page-image',
    data(){
      return{
        // 上传的请求头对象
        header:{Authorization:`Bearer ${auth.getUser().token}`},
        // 预览图
        imageUrl:null,
        // 控制对话框的显示和隐藏
        dialogVisible:false,
        // 总条数
        total:0,
        images:[],
        // 素材列表数据
        reqParams:{
          // 是否查的收藏 true收藏 false全部
          collect:false,
          page:1,
          per_page:10
        }
      }
    },
    created(){
      this.getImages()
    },
    methods:{
      // 上传成功response上传成功后后台返回的数据
      // 
      uploadSuccess(response){
        // 提示加预览
        this.$message.success('上传素材成功')
        this.imageUrl=response.data.url
        // 3s后，关闭对话框更新列表
        window.setTimeout(()=>{
          this.dialogVisible=false
          this.getImages()
        },3000)
      },
      // 打开对话框
      openDialog(){
        this.dialogVisible=true
        // 打开的时候清除预览图
        this.imageUrl=null
      },
      // 收藏功能
      async toggleStatus(item){
        //发请求
        try{
          await this.$http.put(`user/images/${item.id}`,{
            // 和当前状态取反
            collect:!item.is_collected
          })
          this.$message.success(!item.is_collected?'添加收藏成功':'取消收藏成功')
          // 根据修改后的状态改颜色 修改图片数据对用的状态
          item.is_collected=!item.is_collected
          }catch(e){
            this.$message.success(!item.is_collected?'添加收藏失败':'取消收藏失败')
        }
      },
      // 删除素材
      delImage(id){
         this.$confirm('此操作将永久删除该素材, 是否继续?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            // 点击确认，发删除请求
            try {
              // 1. 测试账户的文章数据，后台限制不能删除
              // 2. 请求成功，后台没有响应内容，
              await this.$http.delete(`user/images/${id}`)
              this.$message.success('删除素材成功')
              this.getImages()
            } catch (e) {
              this.$message.error('删除文章失败')
            }
          }).catch(() => {
            // 点击取消，没有任何逻辑
          })
      },
      //切换全部和收藏
      toggleList(){
        this.reqParams.page=1
        this.getImages()
      },
      // 切换分页
      changePager (newPage) {
        this.reqParams.page = newPage
        this.getImages()
      },
       async getImages () {
        const res = await this.$http.get('user/images', { params: this.reqParams })
        this.images = res.data.data.results
        // 总条数
        this.total=res.data.data.total_count
      }
    }
}
</script>

<style scoped lang="less">
// scoped只能作用于当前组件下生效 不能作用于其他
    .list-box {
      margin-top: 20px;
      .item-box {
        display: inline-block;
        width: 180px;
        height: 180px;
        margin-right: 60px;
        border: 1px dashed #ddd;
        position: relative;
        margin-bottom: 20px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
        .option {
          width: 100%;
          height: 30px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
          text-align: center;
          line-height: 30px;
          span {
            color: #fff;
            margin: 0 20px;
            // 不加&解析后：span .red{} 后代选择器
            // 加上&节后后：span.red{}  交集选择器
            &.red {
              color: red;
            }
          }
        }
      }
    }
</style>
<style lang="less">
//     // 上传组件的样式 想作用于全局需要再加个没有scoped的样式
//     .avatar-uploader{
//       text-align: center;
//     }
//     .avatar-uploader .el-upload {
//       border: 1px dashed #d9d9d9;
//       border-radius: 6px;
//       cursor: pointer;
//       position: relative;
//       overflow: hidden;
//     }
//     .avatar-uploader .el-upload:hover {
//       border-color: #409EFF;
//     }
//     .avatar-uploader-icon {
//       font-size: 28px;
//       color: #8c939d;
//       width: 178px;
//       height: 178px;
//       line-height: 178px;
//       text-align: center;
//     }
//     .avatar {
//       width: 178px;
//       height: 178px;
//       display: block;
//     }
</style>